<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <div class="comments">
    <form action="" id="myForm">
      <h3 class="comm-head">评论</h3>
      <input class="username" name="username" type="text" value="水若寒宇" />
      <div class="comm-input">
        <textarea placeholder="爱发评论的人，运气都很棒" name="content"></textarea>
        <div class="foot">
          <div class="word"></div>
          <button class="btn">发表评论</button>
        </div>
      </div>
      <h3 class="comm-head">热门评论<sub>(0)</sub></h3>
      <ul class="comm-list">
        <!-- <li class="comm-item">
      <div class="avatar"></div>
      <div class="info">
        <p class="name vip">
          清风徐来
          <img src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
        </p>
        <p className="time">
          <span>2012-12-12</span>
          <span class="iconfont icon-collect"></span>
          <span class="del">删除</span>
        </p>
        <p>
          这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
        </p>
      </div>
    </li> -->
      </ul>
    </form>
  </div>
  <script src="./lib/jquery.js"></script>
  <script src="./lib/template-web.js"></script>
  <script>
    //获取数据
    const baseURL = 'http://www.liulongbin.top:3006'

    getComment()

    function getComment() {
      $.get(`${baseURL}/api/cmtlist`, function ({
        data
      }) {
        // console.log(data);
        $('.comm-head>sub').text(data.length)
        $('.comm-list').html(data.map((item) => {
          return `
                  <li class="comm-item">
                  <div class="avatar"></div>
                  <div class="info">
                   <p class="name vip">
                  ${item.username}
                  <img src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
                </p>
                <p className="time">
                  <span>${item.time}</span>
                  <span class="iconfont icon-collect"></span>
                  <span class="del" id='${item.id}' onclick='delComment(id)'>删除</span>
                </p>
                <p>
                  ${item.content}
                </p>
              </div>
            </li>
                  `
        }))
      })
    }

    // 新增
    addComment()

    function addComment() {

      $('#myForm').on('submit', function (event) {
        event.preventDefault();
        const data = $(this).serialize();


        $.post(`${baseURL}/api/addcmt`, data, () => {
          getComment()
          $(this)[0].reset();
        })
      })
    }

    //删除
    function delComment(id) {
      $.ajax({
        type: 'delete',
        url: `${baseURL}/api/delcmt?id=${id}`,
        success() {
          getComment()
        }
      })

    }
  </script>
</body>

</html>